<template>
	<div class="jwchat" >
		<JwChat-index class="JwChat-index" v-if="seen"
			:taleList="taleList" 
			@enter="bindEnter" 
			v-model="inputMsg"
			:showRightBox='false' 
			scrollType="scroll" 
			height="80vh" 
			:config="config" 
			:toolConfig="tool" />
		<JwChat-index class="JwChat-index" v-else-if="!seen"
			:taleList="taleList" 
			@enter="bindEnter" 
			v-model="inputMsg"
			:showRightBox='false' 
			scrollType="scroll" 
			width="380px"
			height="80vh" 
			:config="config" 
			:toolConfig="tool" />
	</div>
</template>



<script>
	import Vue from 'vue'
	import axios from "axios";
	import {baseUrl} from '../utils/global.js'
	import {menuSeen, getNowDate} from '../utils/Tool.js'
	export default {
		data() {
			return {
				seen: true,
				scrollType: 'noroll', // scroll  noroll 俩种类型
				placeholder: "欢迎使用JwChat...",
				inputMsg: '',
				isToken: false,
				taleList: [],
				chartList: [],
				tool: {
					showEmoji: false, // 是否显示表情图标
				},
				config: {
					img: "//img.lhdown.com/uploadfile/2022/1227/20221227021317804.png",
					name: "ChatGPT",
					dept: "智能问答、最简单、最便捷",

				},
			}
		},
		methods: {
			/* 发送数据*/
			bindEnter(e) {
				const msg = this.inputMsg
				if (!msg) return;
				const msgObj = {
					"date": getNowDate(),
					"text": {
						"text": msg
					},
					"mine": true,
					"name": "OpenApp",
					"img": "https://youruoiot.cn/openapp_logo.png"
				}
				this.taleList.push(msgObj);
				const chartMsgObj = {
					"content": msg,
					"role": "user",
				}
				this.chartList.push(chartMsgObj);
				this.sendData();
			},
			toolEvent(type, obj) {
				console.log('tools', type, obj)
			},
			talkEvent(play) {
				console.log(play)
			},
			
			/* 发送数据 */
			sendData(){
				const token = Vue.$cookies.get('token')
				let url = "";
				const config = {
					headers: {
						"Authorization": "bearer " + token,
					}
				};
				const data = {
				  "message": "",
				  "message_list": this.chartList,
				  "chat_id": ""
				}
				if(token == null){
					url = "/chat_application/chat";
				} else {
					url = "/chat_application/user_chat";
				}

				axios.post(baseUrl + url, data, config)
				.then((res) => {
					if (res.status == 200) {
						const msgObj = {
							"date": getNowDate(),
							"text": {
								"text": res.data.message.content
							},
							"mine": false,
							"name": "ChatGPT",
							"img": "//img.lhdown.com/uploadfile/2022/1227/20221227021317804.png"
						}
						this.taleList.push(msgObj);
						const chartMsgObj = {
							"content": res.data.message.content,
							"role": res.data.message.role,
						}
						this.chartList.push(chartMsgObj);
					}
				})
				.catch((res) => {
					console.log(res)
					try{
						this.$message.error(res.response.data.detail[0].msg);
					}catch(e){
						this.$message.error(res.response.data.detail.msg);
					}
					
				});
			}
			

		},
		mounted() {
			const screenHeight = menuSeen()
			if(screenHeight>415){
			    this.seen=true;
			}else{
			    this.seen=false;
			}
			// 判断是否登录
			if(Vue.$cookies.get('token') !=null ){
				this.isToken = true;
			} else {
				this.isToken = false;
			}
			
			/* const img = 'https://www.baidu.com/img/flexible/logo/pc/result.png'
			const list = [{
					"date": "2020/04/25 21:19:07",
					"text": {
						"text": "起床不"
					},
					"mine": false,
					"name": "ChatGPT",
					"img": "//img.lhdown.com/uploadfile/2022/1227/20221227021317804.png"
				},


			]
			this.taleList = list */
		}
	}
</script>

<style>
	/* .JwChat-index {
	width: 100%;
  height: 100vh;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
} */
	.jwchat{
		/* background-image: linear-gradient(to bottom right,#7a88ff,#7affaf); */
	}
	.JwChat-index {
		margin: 0 auto;
		margin-top: 20px;
		margin-bottom: 20px;
	}
</style>
